<template>
  <view class="gg-treaty">
    <view class="gg-treaty-item">
      <label class="gg-treaty-label">
        <checkbox-group class="gg-treaty-item-group" @change="hindChange">
          <checkbox value="true" :checked="vModel" :disabled="disabled" style="transform:scale(0.7)" />{{explain}}
        </checkbox-group>
      </label>
      <text class="gg-treaty-item-url" @tap="handleClick">
        {{treaty}}
      </text>
    </view>
  </view>
</template>

<script>

export default {
  name: "GgTreaty",
  props: {
    explain: {
      type: String,
      default: "我已阅读"
    },
    treaty: {
      type: String,
      default: "服务协议"
    },
    url: {
      type: String,
      default: ""
    },
    value: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      vModel: false
    };
  },
  created() {
    this.vModel = this.value;
  },
  methods: {
    hindChange(e) {
      this.vModel = e.detail.value[0] ? true : false;
      this.$emit('input', this.vModel);
    },
    handleClick() {
      if (this.url) {
        uni.navigateTo({
          url: this.url
        });
      }
      this.$emit('click');
    }
  }
};
</script>

<style>
.gg-treaty {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  padding: 0 10px;
}
.gg-treaty-label {
  display: initial;
}
.gg-treaty-item-group {
  float: left;
  font-size: 14px;
}
.gg-treaty-item-url {
  display: initial;
  margin-left: 3px;
  color: red;
  text-decoration: underline;
}
</style>
